// 人员信息
<template>
<c-form-block-container :title='title'>

<div class='form-btns' slot="header" v-if='showForm'>
    <c-btn-icon class="btn" type='danger text' icon='icon-close' @click='clance'></c-btn-icon>
    <c-btn-icon class="btn" type='primary text' icon='icon-complete' @click='submitFormData'></c-btn-icon>
</div>
    
<div class="car-parsonal-info">

    <div class="list" v-if='!showForm'>

        <ul>

            <li class="item" v-for='item of personal' :key="item.label">
               <div class="item-container">

                <label>
                    {{item.label}}
                </label>

                <p class="txt">
                    {{item.val}}
                </p>

                <div class="sameOwner"  v-if='item.label !== "车主"'>
                    <label>
                        车主
                    </label>
                    <Checkbox @on-change='setSame(item)' :disabled='item.same' v-model="item.same"></Checkbox>
                </div>

                <div class="control">

                   <div class="content">
                        <c-btn-icon 
                        class='btn'
                        @click="edit(item)"
                        :disabled='item.same'
                        type='text primary' 
                        icon='icon-edit'
                        ></c-btn-icon>

                        <c-btn-icon 
                        class='btn' 
                        type=' text danger' 
                        icon='icon-delete'
                        @click='clear(item)' 
                        ></c-btn-icon>
                   </div>
                    
                </div>
                   
               </div>
            </li>

        </ul>    

        <Button size='small' class='add' long @click='add'> 
            <i class="iconfont icon-add-copy icon"></i>
            新增受益人
        </Button>
        
    </div>

    <div class="form" v-else>
        
        <l-personal-form :data='formCache' @validate='getFormValidate'></l-personal-form>
        
    </div>
</div>
</c-form-block-container>
    
</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import { deepCopy } from '@/utils/tools'
import carPersonal from '@/components/ivew_conf/car_personal'
import personalForm from '@/components/ivew_components/personal_form/index.vue'

@Component({
    components: {
        'l-personal-form': personalForm
    }
})
export default class carPersonalInfo extends Vue{
    name:string ='carPersonalInfo'

    @Prop()
    data:internalInf.carOrderAPI

    @Prop()
    type:string

    formCache:any = new carPersonal()

    formValidate:any

    // 表单显示切换
    showForm:boolean = false

    @Watch('data')
    onChange(newVal){


        this.edit(
            {
                label: '车主',
                key: 'DSOnickname',
                val: '请编辑',
                same: false,
                order: 0,
            }
        )
        
    }


    // 构建展示数据
    get personal (){
        let data = this.data;
        let cache = [];
        
        this.conf.forEach(confItem =>{

            let val = data[confItem.key]
            let newConfItem:formInf.personalItemInf;
            
            if(Array.isArray(val)){ 
                
                // 受益人数组
                val.forEach((valItem, index) =>{

                    newConfItem = {

                        label: `${confItem.label}(${valItem.order})`,
                        val: valItem['nickname'],
                        key: confItem.key,
                        same: this.isSame(valItem['nickname']),
                        order: valItem.order || 0

                    }
                    
                    cache.push(newConfItem)
                })
                
            }else{
                
                newConfItem = deepCopy(confItem)
                newConfItem.val = val || newConfItem.val;
                newConfItem.same = newConfItem.key !== 'DSOnickname' ? this.isSame(newConfItem.val) : false;

                cache.push(newConfItem)
            }

        })
        
        return cache
    }

    title:string = '人员信息'

    conf:formInf.personalItemInf[] = [

        {
            label: '车主',
            key: 'DSOnickname',
            val: '请编辑',
            same: false,
            order: 0,
        },
        {
            label: '投保人',
            key: 'DSPnickname',
            val: '请编辑',
            same: false,
            order: 0,
            
        },
        {
            label: '被保人',
            key: 'DSAnickname',
            val: '请编辑',
            same: false,
            order: 0
        },
        {
            label: '受益人',
            key:'DSBeneficiaries',
            val: '请编辑',
            same: false,
            order: 0
        }
        
    ]

    // 获取验证对象
    getFormValidate(formValidate){
        this.formValidate = formValidate;
    }

    // 新增受益人
    add(){
        let order = this.data['DSBeneficiaries'].length + 1;
        let newVal = new carPersonal({order});
        this.data['DSBeneficiaries'].push(newVal);
        
    }

    // 同步表单数据
    submitFormData(){
        let formCache = this.formCache;
        let prefix = this.getPrefix(formCache.key);
        let data = this.data;
        let pass = true;
        
        this.formValidate.validate(valid =>{
            pass = valid;
        })

        // 验证短路
        if(!pass){return}
        
        
        if(!prefix){
            data[formCache.key][formCache.order-1];
        }else{
            Object.keys(formCache).forEach(key =>{

                let propername = prefix + key;

                if(data.hasOwnProperty(propername)){
                    data[propername] = formCache[key]
                }
                
            })
        }

        this.formSwitch('close')
        this.setTitle()
    }

    // 表单界面显示开关
    formSwitch(type:'open'|'close'){
        this.showForm = type ? type ==='open' : !this.showForm;
        
    }

    clance(){
        this.formSwitch('close')
        this.setTitle();
    }
    
    // 进入编辑
    edit(item){
        this.formSwitch('open')
        let _this = this;
        let formCache:any = new carPersonal();
        let prefix = this.getPrefix(item.key);

        this.setTitle(item.label)
    
        if(prefix){
            Object.keys(formCache).forEach(key =>{
                formCache[key] = _this.data[prefix + key]; 
            })
            
        }else{
            formCache = this.data[item.key][item.order-1];
        }

        formCache.key = item.key

        this.formCache = formCache;
        
    }   

    // 构建模板
    buildTemp (isEmpty:boolean = false){
        let _this = this;
        let template = {
            nickname: '',
            kind: '',
            idCardNumber: '',
            idCardKind: '',
            address: '',
            contact: '',
            phone: '',
            order: 0,
        }

        // 车主信息
        if(!isEmpty){
            Object.keys(template).forEach(key =>{
                template[key] = _this.data['DSO' + key];
            })
        }
      
        return deepCopy(template);
    }

    // 相同判断
    isSame(val):boolean{
        return val === this.data['DSOnickname']
    }

    // 获取属性前缀
    getPrefix (key):string{
        return key.substring(0, key.indexOf('nickname'));
    }

    // 同车主信息设置
    setSame(item){
        this.updateItemVal(item, this.buildTemp());
    }

    // 构建对应前缀对象
    assignment (prefix, template){
        let cache = {};

        Object.keys(template).forEach(key =>{
            cache[prefix+key] = template[key]
        })

        return cache;
    }  


    // 重置数据
    clear (item){

        if(item.order > 1){
            // 多于一条受益人
            this.data[item.key].splice(item.order-1, 1);

            // 重新编号
            this.data[item.key].forEach((item, index) =>{
                item.order = index + 1;
            })
            
        }else{
            this.updateItemVal(item);
        }
        
    }


    // 数据赋值
    updateItemVal(item:formInf.personalItemInf, newVal:any =  this.buildTemp(true)){

        let target = this.data;
        let source:any = newVal;
        
        if(item.same){

            // 是否为受益人列表
            if(item.order>0){

                target = this.data[item.key][item.order-1];
                delete source.order;

            }else{
                
                let prefix = this.getPrefix(item.key);
                source = this.assignment(prefix,newVal)
            }
            
        }

        Object.assign(target, source)
        
    }

    // 设置模块标题
    setTitle(title?:string){
        this.title = title || '人员信息'
    }
    

}


</script>

<style scoped lang='scss'>
.car-parsonal-info{
    max-width: _rem(290px);
    box-sizing: border-box;
    height: 100%;
    
    .item{
        overflow: hidden;
        
        position: relative;
        height: _rem(36px);

        line-height: _rem(36px);

        &:hover{
            
            overflow: visible;
            .item-container{
                width:  _rem(290px);
                padding-right: _rem(10px);
                box-shadow: $default_shadow;

                &>label{
                    color: $main_color;

                    &::before{
                        background: $main_color;
                    }
                }
            }
            .control{
                animation: goto $transition_time;
                width: _rem(60px);
            }

             
        }
        
    }

    @keyframes goto {
        0%{
            width: 0;
            opacity: 0;
        }
        50%{
            opacity: 0;
            width: 0;
            transform: translateX(_rem(-30px))
        }
        100%{
            width: _rem(60px);
            opacity: 1;
        }

    }

    .item-container{
        position: absolute;
        top:0;
        bottom: 0;
        left:0;

        display: flex;
        align-items: center;
        margin: auto;
        width: 100%;
        border-radius: $border_radius;
        background: $block_bg_color;
        cursor: default;
        z-index: 9;

        transition: all $transition_time_q;
    }
    
    .item + .item{
        margin-top: _rem(4px);
    }


    .item-container > label{
        display: inline-block;

        flex: 0 _rem(68px);
        width: _rem(68px);
        position: relative;
        padding: 0 _rem(4px);
        color: $font_secondary;
        transition: all $transition_time;
        
        
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;

            margin: auto;
            $size: _rem(2px);
            width: $size;
            height: _rem(10px);
            border-radius: $border_radius;
            background: $font_secondary;
        }
    }

    .txt{
        display: inline-block;
        box-sizing: border-box;
        flex: 0 _rem(90px);
        width: _rem(90px);
        height: _rem(36px);
        transition: all $transition_time;
        line-height: _rem(36px);
        @extend %text_overflow;
    }

    
    .sameOwner{
        display: flex;
        flex: 0 _rem(60px);
        width: _rem(60px);
        align-items: center;
        padding-left: _rem(10px);
        color: $font_secondary;
        
    }

    .control{
        overflow: hidden;
        width: 0;
        align-self: center;

        .content{
            min-width: _rem(60px);
        }
    }

    .add{
        margin-top: _intervals();
        .icon{
            font-size: $font-mini;
        }
    }

    

}

.form-btns{
    text-align: right;
        
    .btn + .btn{
        margin-left: _rem(6px);
    }    
}


</style>